<!--
  - Copyright (c) 2019.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-row>
      <el-col :span="4" align="left" style="line-height: 36px;height: 36px">
        <span style="font-size: 14px;color: #747778">资产信息</span>
      </el-col>
    </el-row>
    <el-row style="justify-content: center">
      <el-button @click="addRow()"
                 style="margin: 8px 0px 8px 0px;padding: 6.2px 7px;font-size: 13px;line-height: 18px"
                 v-if="tableData.length === 0 && canEdit && editable" round>
        <i class="joys-icon-new" style="margin-right: 12px;margin-left: 4px"/>
        <span style="margin: 0px">添加资产信息</span>
      </el-button>
      <el-button type="primary"
                 @click="addRow()"
                 style="padding: 0px 18px 0px 8px;line-height: 36px;margin: 12px 0px"
                 v-if="editable && canEdit && !showForm && tableData.length > 0" round>
        <i class="joys-icon-addagain" style="margin-right: 18px;"/>
        <span style="margin: 0px;display: inline-block;font-size: 14px;">继续添加</span>
      </el-button>
      <span v-if="tableData.length === 0 && !editable">没有数据</span>
    </el-row>

    <transition name="el-zoom-in-top">
      <el-form :model="formData"
               ref="formData"
               :rules="rules"
               :class="{cardBackColor:!canEdit}"
               style="text-align: left;padding-top: 28px"
               v-loading="loading"
               v-show="showForm" inline>
        <el-row style="padding:0px 12px 24px 12px">
          <el-row>
            <el-col :md="8" :lg="6">
              <el-form-item label="资产类型" prop="investmentType">
                <ft-enum-select v-model="formData.investmentType"
                                service-name="lss-customer"
                                type-name="investmentType"
                                placeholder="请选择"
                                :editing="!canEdit">
                </ft-enum-select>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="资产名称" prop="investmentName">
                <ft-input :editable="!canEdit"
                          v-model="formData.investmentName"
                          class="input"
                          placeholder="请输入内容"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="证书编号" prop="investmentCertificateCode">
                <ft-input :editable="!canEdit"
                          v-model="formData.investmentCertificateCode"
                          class="input"
                          placeholder="请输入内容"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="面积" prop="investmentArea">
                <ft-number-input :editable="!canEdit" v-model="formData.investmentArea"
                                 placeholder="请输入内容" :precision='[10,2]'></ft-number-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="设置抵（质）押" prop="pledge">
                <ft-enum-select v-model="formData.pledge"
                                service-name="lss-customer"
                                type-name="yesOrNo"
                                :editing="!canEdit">
                </ft-enum-select>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="抵（质）押机构" prop="pledgeOrg">
                <ft-input :editable="!canEdit && formData.pledge"
                          v-model="formData.pledgeOrg"
                          class="input"
                          placeholder="请输入内容"></ft-input>
              </el-form-item>
            </el-col>

            <el-col :md="8" :lg="6">
              <el-form-item label="抵（质）押金额" prop="pledgeAmount">
                <ft-number-input v-model="formData.pledgeAmount" :precision='[16,2]'
                                 :editable="!canEdit && formData.pledge"></ft-number-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="评估价格" prop="assessAmount">
                <ft-number-input v-model="formData.assessAmount" :editable="!canEdit"
                                 :precision='[16,2]'></ft-number-input>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="6">
              <el-form-item label="权属起止日期" prop="ownershipDate">
                <el-date-picker v-if="!canEdit"
                                v-model="formData.ownershipDate"
                                type="daterange"
                                format="yyyy-MM-dd"
                                valueFormat="yyyy-MM-dd"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :readonly="canEdit">
                </el-date-picker>
                <div v-if="canEdit"  style="display: flex">
                  <ft-input :editable="!canEdit" v-model="this.ownershipStartDate"/>
                  <span>至</span>
                  <ft-input :editable="!canEdit" v-model="this.ownershipEndDate"/>
                </div>
              </el-form-item>
            </el-col>
          </el-row>

            <el-col :md="24" :lg="24">
              <el-form-item label="备注" prop="remark">
                <ft-input type="textarea"
                          class="input"
                          :editable="!canEdit"
                          :autosize='{ minRows: 1, maxRows: 5}'
                          v-model="formData.remark">
                </ft-input>
              </el-form-item>
            </el-col>

        </el-row>

        <hr style="background-color: #EDEDED;border: none;height: 1px;margin: 0px"/>

        <el-row style="padding:16px 0px">
          <el-col align="right" v-show="!canEdit">
            <el-button size="mini"
                       @click="handleCancel()">取消
            </el-button>
            <el-button size="mini"
                       type="primary"
                       @click="handleSave()"
                       style="margin-left: 24px;margin-right: 36px"
                       :disabled="canSave">保存
            </el-button>
          </el-col>
          <el-col align="right" v-show="canEdit">
            <el-button size="mini"
                       style="margin-left: 24px;margin-right: 36px"
                       @click="handleCancel()">返回
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </transition>

    <transition name="el-zoom-in-top">
      <el-table v-show="tableData.length > 0 && !showForm"
                tooltip-effect="light"
                :data="tableData"
                class="tableClass">
        <el-table-column label="资产类型" min-width="120px" prop="investmentType" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <ft-enum-select v-model="scope.row.investmentType"
                            service-name="lss-customer"
                            type-name="investmentType"
                            placeholder="请选择"
                            :editing="tableEnumEdit">
            </ft-enum-select>
          </template>
        </el-table-column>
        <el-table-column label="资产名称" min-width="120px" prop="investmentName" align="left" show-overflow-tooltip>
          <template slot-scope="scope">
            <ft-link-text @click="handleCard(scope.$index,scope.row)"
                          :text="scope.row.investmentName">
            </ft-link-text>
          </template>
        </el-table-column>

        <el-table-column label="证书编号" min-width="120px" prop="investmentCertificateCode" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column label="面积" min-width="100px" prop="investmentArea" align="left">
          <template slot-scope="scope">
            <ft-number-input :editable="false" v-model="scope.row.investmentArea"
                             :precision='[10,2]'></ft-number-input>
          </template>
        </el-table-column>
        <el-table-column label="权属起止日期" min-width="120px" align="left" prop="ownershipDateName" show-overflow-tooltip></el-table-column>
        <el-table-column label="评估价格" min-width="100px" prop="assessAmount" align="center">
          <template slot-scope="scope">
            <ft-number-input :editable="false" v-model="scope.row.assessAmount"
                             :precision='[10,2]'></ft-number-input>
          </template>
        </el-table-column>
        <el-table-column v-if="editable" label="操作" align="center" min-width="120">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="handleEdit(scope.$index,scope.row)">编辑
            </el-button>
            <el-popover title="确认" placement="top" width="200" v-model="scope.row.delVisible">
              <p>数据删除后，将不能恢复，确认删除？</p>
              <div style="text-align:right; margin:0">
                <el-button size="small"
                           @click="scope.row.delVisible=false">取消
                </el-button>
                <el-button type="danger" size="small" @click="handleDelete(scope.$index, tableData)">确定</el-button>
              </div>
              <span slot="reference" style="margin-left:.10rem">
              <el-button type="text" size="small" style="color:#B94A48">删除
              </el-button>
            </span>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </transition>
  </div>
</template>

<script>

  export default {
    name: "Investment",
    props: {
      customerId: {
        type : String,
        default : '',
      },
      editable: {
        type : Boolean,
        default : true,
      },
    },
    mounted() {
      this.load()
    },
    data() {
      return {
        tableData: [],
        tableEnumEdit: false,
        dataVersion: "",
        shId: "",
        investmentInfo: {},
        formBack: {},
        formData: {},
        showForm: {
          type: Boolean,
          default: false
        },
        canEdit: true,
        canSave: false,
        //权属开始日期
        ownershipStartDate:'',
        //权属结束日期
        ownershipEndDate:'',
        //加载动画
        loading:false,
        rules: {
          investmentType: [
            {required: true, message: '资产类型不能为空', trigger: 'blur'}],
          investmentName: [
            {required: true, message: '资产名称不能为空', trigger: 'blur'},
            {max: 80, message: '资产名称长度不超过80字', trigger: 'blur'}],
          investmentCertificateCode: [
            {required: true, message: '证书编号不能为空', trigger: 'blur'},
            {max: 30, message: '证书编号长度不超过30字', trigger: 'blur'}],
          investmentArea: [
            {required: true, message: '面积不能为空', trigger: 'blur'}],
          ownershipDate: [
            {required: true, message: '权属起止日期不能为空', trigger: 'blur'}],
          pledge: [
            {required: true, message: '确认是否设置抵质押', trigger: 'blur'}],
          pledgeOrg: [
            {max: 50, message: '机构长度不超过50字', trigger: 'blur'}],
          assessAmount: [
            {required: true, message: '评估价格不能为空', trigger: 'blur'}],
          remark:[
            {max:1000,message:'备注信息不能超过1000字',trigger:'blur'}
          ]
        }
      }

    },
    methods: {
      load() {
        this.loading=true
        this.$http.get('/joys-rest/lss-customer/investment/' + this.customerId).then(
          resp => {
            this.tableData = resp.body;
            this.tableData.map(element => {
              this.ownershipStartDate= element.ownershipDate[0]
              this.ownershipEndDate = element.ownershipDate[1]
              return element.ownershipDateName = this.ownershipStartDate + '/' + this.ownershipEndDate
            });
            this.showForm = false
            this.loading=false
          }, resp => {
            this.loading=false
            this.$message.error(resp.body)
          })
      },
      //列表删除按钮
      handleDelete(index, row) {
        this.loading=true
        this.shId = row[index].investmentInfoId;
        this.$http.delete('/joys-rest/lss-customer/investment/' + this.shId).then(
          resp => {
            row.splice(index, 1);
            this.loading=false
            this.$message.success('删除成功!')
          },
          resp => {
            this.loading=false
            this.$message.error(resp.body)
          })
      },
      //列表取消
      handleCancel() {
        this.showForm = false;
        this.canEdit = true;
        this.formData = this.formBack
      },
      //列表编辑按钮
      handleEdit(index, row) {
        this.formData = JSON.parse(JSON.stringify(row));
        this.formBack = JSON.parse(JSON.stringify(row));
        this.canEdit = false;
        this.showForm = true
      },
      //列表卡片按钮
      handleCard(index, row) {
        this.formData = row;
        this.canEdit = true;
        this.showForm = true
      },
      //列表增行
      addRow() {
        this.formData = {
          customerId: this.customerId,
        };
        this.index = -1;
        this.canEdit = false;
        this.showForm = true
      },
      //保存
      handleSave() {
        this.loading=true
        this.$refs.formData.validate((valid) => {
            if (valid) {
              this.$http.put('/joys-rest/lss-customer/investment/', this.formData).then(
                resp => {
                  this.load()
                  this.canEdit = true
                  this.showForm = false
                },
                resp => {
                  this.loading=false
                  this.$message.error(resp.body);
                  this.canEdit = false
                })
            } else {
              this.loading=false
              return false
            }
          }
        )
      }
    }
  }
</script>

<style scoped>
  .input{
    word-wrap: break-word;
  }
</style>
